<template>
  <div>
    <div v-if="useScrollView" class="pdf-review-scroll">
      <div class="pdf-review-container">
        <vue-pdf
          v-for="idx in pageCount"
          :key="idx"
          :src="src"
          :page="idx"
        ></vue-pdf>
      </div>
    </div>
    <div v-else class="pdf-review-pagination">
      <div class="pagination">
        <div class="pre-page" @click="changePdfPage(true)">前一页</div>
        <div class="page-count">{{ currentPage }} / {{ pageCount }}</div>
        <div class="next-page" @click="changePdfPage(false)">下一页</div>
      </div>
      <div class="pdf-review-container">
        <vue-pdf
          :src="src"
          :page="currentPage"
          @num-pages="pageCount=$event"
          @page-loaded="currentPage=$event"
          @loaded="loadPdfHandler"
        ></vue-pdf>
      </div>
    </div>
  </div>
</template>
<script>
  import VuePdf from 'vue-pdf'

  export default {
    name: 'PdfReview',
    components: { VuePdf },
    props: {
      url: {
        type: String,
        default: '/'
      },
      useScrollView: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        src: null,
        currentPage: 0,
        pageCount: 0,
      }
    },
    created() {
      this.readFile()
    },
    methods: {
      readFile() {
        this.src = VuePdf.createLoadingTask(this.url)
        this.src.promise.then(pdf => {
          this.pageCount = pdf.numPages
        })
      },
      changePdfPage(isReduce) {
        if (isReduce && this.currentPage > 1) {
          this.currentPage--
        }
        if (!isReduce && this.currentPage < this.pageCount) {
          this.currentPage++
        }
      },
      loadPdfHandler() {
        this.currentPage = 1
      }
    }
  }
</script>
<style scoped lang="scss">
  .pdf-review-pagination {
    .pagination {
      height: 50px;
      > div {
        cursor: pointer;
        float: left;
        height: 100%;
      }
      .pre-page {
        width: 10%;
        text-align: left;
      }
      .page-count {
        width: 80%;
        text-align: center;
      }
      .next-page {
        width: 10%;
        text-align: right;
      }
    }
    .pdf-review-container {
      /*max-height: 800px;*/
      width: 100%;
      overflow-y: auto;
    }
  }
</style>
